<template>
	<!-- 智车生活 -->
	<view class="">
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#1E6DF2" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750" bar-height="4" bar-width="84" gutter="0"
					:bar-style="barStyle"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="all">
							<view class="all-left">
								<view class="">
									10<text>元</text>
								</view>
								<view>满￥15可用</view>
							</view>
							<view class="all-right">
								<text>停车抵扣卷</text>
								<text>旗峰路金源花园停车缴费花园停车缴费</text>
								<text>2023-09-10至2023-12-30</text>
							</view>
							<view class="use" @click="show = true">
								立即购买
							</view>

						</view>

					</scroll-view>
				</swiper-item>
				<!-- 积分商城 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="brand">
							<view class="distance">
								<text>品牌</text>
								<u-icon name="arrow-down" size="16" class="arrow-right" color="#333333"></u-icon>
							</view>
							<view class="distance">
								<text>分类</text>
								<u-icon name="arrow-down" size="16" class="arrow-right" color="#333333"></u-icon>
							</view>
						</view>
						<view class="shopping" @click="detali">
							<image src="" mode=""></image>
							<view class="shop-right">
								<text>肯德基香辣鸡腿堡抵用券20元
</text>
								<text>可全额兑换香辣鸡腿堡一个.</text>
								<view class="">
									<view class="poin">
										2000<text>分</text>
									</view>
									<text class="sell">已售12.6W件</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="24" :closeable="true">
			<view class="popup">
				<view class="title">购买优惠卷</view>
				<view class="beij">
					<view class="juan">
						<view class="juan1">
							<view class="ziti">
								3<text>折</text>
							</view>
						</view>
					</view>
					<view class="right">
						<text>停车抵抗卷</text>
						<text>满￥25可用</text>
					</view>
					<view class="triangle-topright">
					</view>
					<view class="triangle-botright">
					</view>
					<view class="triangle">
					</view>
					<image src="../../static/coupe.png" mode=""></image>
				</view>
				<view>
					<view class="bot-title">
						●<text>使用范围</text>
					</view>
					<view class="textcont">
						<view>
							1、可用于金源花园、华瑞公寓、旗峰雅苑、时代倾城、保利香饼国际等停车缴费。
						</view>
						<view>
							2、缴费金额大于25元才可使用。
						</view>
					</view>

				</view>
				<view class="">
					<view class="bot-title">
						●<text>有效期</text>
					</view>

					<view class="textcont">
						2023-09-10至2023-12-30
					</view>
				</view>
				<view class="money">
					<text>￥</text>90.00
				</view>
				<u-button :custom-style="customStyle" @click="logout">支付</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '优惠券'
					},
					{
						name: '积分商城'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				barStyle: {
					marginBottom: '-4rpx'
				},
				show: true,
				customStyle: {
					fontSize: '32rpx',
					borderRadius: '16rpx',
					background: '#1677FE',
					height: '100rpx',
					margin: '60rpx 55rpx 0rpx',
					color: "#fff"
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			change(index) {
				this.swiperCurrent = index;

			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			detali(){
				uni.navigateTo({
					url:'/pages/intelligentLife/detail'
				})
			},
			getList(pages) {
				this.$Api.getShareParkingtList().then((res) => {
					console.log(res)
					// wx.stopPullDownRefresh()
					// this.dataList = res.data.dataList;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss'
</style>